import React,{Component} from 'react';
import {connect} from 'react-redux'
import  {fetchNews}  from '../actions'
import { NavLink } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink , Breadcrumb , BreadcrumbItem  } from 'reactstrap';

var PAGE=1;
const mapStateToProps = (state)=>{
    return {
        ...state.news
    }
}
class News extends Component{
    componentDidMount(){
        this.props.fetchNews();     
    }
    //显示一页新闻
    getnews(){
        var pageData=this.props.list.pageData;
        if(pageData.length > 0){
            var jxt=[];
            for(let i=0;i<pageData.length;i++){
                var url=`/news/${i}`;
                jxt.push(
                    <NavLink to={url} key={i} style={{color:"#000"}}>
                        <div key={i} >
                            <div className="thumbnail" style={{backgroundColor:"#f5f5f5",padding:"10px"}}>
                                <div className="caption" >
                                    <h4>{pageData[i].title}</h4>
                                    <p>作者 ：{pageData[i].author}</p>
                                    <p>{pageData[i].time}</p>
                                    <p>{pageData[i].content}</p>
                                </div>
                            </div>
                        </div>
                    </NavLink>
                )
            }
            return jxt;
        }else{
            return null;
        }
    }

    //显示分页条
    Paging(){
        var pages=this.props.list.total / 10;   
        var paging=[];
        for(let i=1;i<=pages;i++){
            paging.push(
                <PaginationItem key={i} onClick={()=>{
                        this.changePage(i)
                    }}>
                    <PaginationLink href="javascript:void(0)">
                    {i}
                    </PaginationLink>
                </PaginationItem>
            )
        }
        return paging;
    }


    //跳转页
    changePage(page){
        this.props.fetchNews({page}); 
        PAGE=page;
    }

    render(){
        const{list,fetchNews}=this.props;
        /* console.log(123)
        console.log(this.props) */
        return (
            <div style={{fontSize:"1.5rem"}}>
                <div className="panel panel-success" style={{fontSize:"1.5rem"}}>
                    <div className="panel-body">
                        {this.getnews()}
                    </div>
                </div>
                
                <div >
                    <Pagination aria-label="Page navigation example" style={{width:"380px",display:"block",margin:"0 auto"}}>
                        {/* <PaginationItem>
                            <PaginationLink previous href="#" />
                        </PaginationItem> */}
                        {this.Paging()}
                        {/* <PaginationItem>
                            <PaginationLink next href="/#/product/next" />
                        </PaginationItem> */}
                    </Pagination>
                </div>               
            </div>
        )
   }
}

export default connect(mapStateToProps,{fetchNews})(News);
